/**
 * 功能： Confirm对话框
 */
/*visible bool 控制弹出框隐藏(false)或显示(true)
transparent bool 控制弹出框背景，若为false则弹出框背景为灰色，会挡住弹出框后面的内容，true时才为modal根视图的背景颜色。
animationType string 控制弹出框的动画效果 有三个值：none slide fade
onRequestClose func 当请求关闭时执行*/
'use strict';
/**
 * 导入模块
 */
// 系统模块
import React, { Component } from 'react';
import {
    Text,
    View,
    TouchableHighlight,
    Modal,
} from 'react-native';
import PropTypes from 'prop-types';
// 自定义模块
/**
 * 导入样式
 *
 */
// 自定义样式： 容器样式、引入列表项样式
import Dialog from './css/index';
/**
 * 常量
 */
export default class ConfirmDialog extends Component {
    static propTypes = {
        message:PropTypes.string.isRequired, // 对话框标题
        buttonLeftName: PropTypes.string.isRequired,  // 按钮左名字
        buttonRightName: PropTypes.string.isRequired,  // 按钮右名字
        onLeftPress: PropTypes.func.isRequired,  // 回调函数左
        onRightPress: PropTypes.func.isRequired,  // 回调函数右
    };
    constructor(props) {
        super(props);
    // 绑定事件
    this._onLeftPress  = this._onLeftPress.bind(this);  // 需要在回调函数中使用this,必须使用bind(this)来绑定
    this._onRightPress  = this._onRightPress.bind(this);  // 需要在回调函数中使用this,必须使用bind(this)来绑定
    }
        
    _onLeftPress() {
        if (this.props.onLeftPress) {   // 在设置了回调函数的情况下
            this.props.onLeftPress(this.props.pageName);  // 执行回调
        }
    }
    _onRightPress() {
        if (this.props.onRightPress) {   // 在设置了回调函数的情况下
            this.props.onRightPress(this.props.pageName);  // 执行回调
        }
    }
    render() {
        return (
            <Modal
                visible={this.props.visibility}
                transparent={true}
                animationType={'fade'}//none slide fade
                onRequestClose={()=>this.setState({visibility:false})}
            >
                <View style={Dialog.container}>
                    <View style={Dialog.modalContainer}>
                        {this.props.title ? <Text style={Dialog.modalTitle}>{this.props.title}</Text> : null }
                        <Text style={Dialog.modalMessage}>{this.props.message}</Text>
                        <View style={Dialog.horizonLine}/>
                        <View style={Dialog.row}>
                            <TouchableHighlight style={Dialog.leftBn} onPress={this.props.onLeftPress}  underlayColor={'#FFFFFF'} >
                                <Text style={Dialog.leftBnText}>{this.props.buttonLeftName}</Text>
                            </TouchableHighlight>
                            <View style={Dialog.verticalLine}/>
                            <TouchableHighlight style={Dialog.rightBn} onPress={this.props.onRightPress} underlayColor={'#FFFFFF'} >
                                <Text style={Dialog.rightBnText}>{this.props.buttonRightName}</Text>
                            </TouchableHighlight>
                        </View>
                    </View>
                </View>
            </Modal>
        )
    }
}